<style>
@media print {
  ._wz_ElectronicWaybillDetail {
    -webkit-print-color-adjust: exact;
    height: inherit !important;
    font-size: 12px !important;
  }
}
</style>

<template>
  <div ref="_wz_ElectronicWaybillDetail" class="_wz_ElectronicWaybillDetail">
    <Form>
      <table cellpadding="0" cellspacing="0" border="0">
        <colgroup>
          <col width="13%">
          <col width="20%">
          <col width="13%">
          <col width="20%">
          <col width="13%">
          <col width="20%">
        </colgroup>
        <tbody>
        <tr>
          <td style="font-weight: 600;position:relative;" colspan="6">
            承运信息
            <Button type="primary" @click="printTest" class="no-print" style="position: absolute;right: 10px;top: 4px;">
              打印
            </Button>
          </td>
        </tr>

        <tr>
          <td style="text-align: right;font-weight: 600;">运输车辆</td>
          <td>{{!!formData.vehiclePlateNo ? formData.vehiclePlateNo : '--'}}</td>
          <td style="text-align: right;font-weight: 600;">从业人员</td>
          <td>{{!!formData.driverName ? formData.driverName : '--'}}</td>
          <td style="text-align: right;font-weight: 600;">货运挂车</td>
          <td>{{!!formData.trailerPlateNo ? formData.trailerPlateNo : '--'}}</td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;">人员电话</td>
          <td>{{!!formData.driverPhone ? formData.driverPhone : '--'}}</td>
          <td style="text-align: right;font-weight: 600;">人员类型</td>
          <td>{{!!formData.driverTypeName ? formData.driverTypeName : '--'}}</td>
          <td style="text-align: right;font-weight: 600;">身份证号</td>
          <td>{{!!formData.driverIdentifyNum ? formData.driverIdentifyNum : '--'}}</td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;">调度人</td>
          <td>{{!!formData.schedulingPeople ? formData.schedulingPeople : '--'}}</td>
          <td style="text-align: right;font-weight: 600;">承运日期</td>
          <td>{{!!formData.schedulingDate ? formData.schedulingDate : '--'}}</td>
          <td style="text-align: right;font-weight: 600;">运输企业</td>
          <td>{{!!formData.deptName ? formData.deptName : '--'}}</td>
        </tr>
        <tr>
          <td style="font-weight: 600;position:relative;" colspan="6">客户信息</td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;">委托方</td>
          <td>{{!!formData.customerShipperName ? formData.customerShipperName : '--'}}</td>
          <td style="text-align: right;font-weight: 600;">联系人</td>
          <td>{{!!formData.customerShipperContact ? formData.customerShipperContact : '--'}}</td>
          <td style="text-align: right;font-weight: 600;">联系电话</td>
          <td>{{!!formData.customerShipperPhone ? formData.customerShipperPhone : '--'}}</td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;">确认方</td>
          <td>{{!!formData.customerReceivingName ? formData.customerReceivingName : '--'}}</td>
          <td style="text-align: right;font-weight: 600;">联系人</td>
          <td>{{!!formData.customerReceivingContact ? formData.customerReceivingContact : '--'}}</td>
          <td style="text-align: right;font-weight: 600;">联系电话</td>
          <td>{{!!formData.customerReceivingPhone ? formData.customerReceivingPhone : '--'}}</td>
        </tr>
        <tr>
          <td style="font-weight: 600;position:relative;" colspan="6">地点信息</td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;">起运地点</td>
          <td>{{!!formData.placeStartPlace ? formData.placeStartPlace : '--'}}</td>
          <td style="text-align: right;font-weight: 600;">发车时间</td>
          <td>{{!!formData.startDate ? formData.startDate : '--'}}</td>
          <td style="text-align: right;font-weight: 600;">行政区域</td>
          <td>{{!!formData.startAdministrative ? formData.startAdministrative : '--'}}</td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;">起运地址</td>
          <td colspan="5">{{!!formData.placeStartAddress ? formData.placeStartAddress : '--'}}</td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;">目的地点</td>
          <td>{{!!formData.placeEndPlace ? formData.placeEndPlace : '--'}}</td>
          <td style="text-align: right;font-weight: 600;">收车时间</td>
          <td>{{!!formData.endDate ? formData.endDate : '--'}}</td>
          <td style="text-align: right;font-weight: 600;">行政区域</td>
          <td>{{!!formData.endAdministrative ? formData.endAdministrative : '--'}}</td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;">目的地址</td>
          <td colspan="5">{{!!formData.placeEndAddress ? formData.placeEndAddress : '--'}}</td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;">备注</td>
          <td colspan="5">{{!!formData.remark ? formData.remark : '--'}}</td>
        </tr>
        <tr>
          <td style="font-weight: 600;position:relative;" colspan="6">定位数据</td>
        </tr>
        <tr>
          <td colspan="6" style="padding: 10px;">
            <div class="baidumap" id="_wz_ElectronicWaybillDetail"  style="height: 500px;"></div>
          </td>
        </tr>
        </tbody>
      </table>
    </Form>
    <Spin size="large" fix v-if="spinShow"></Spin>
  </div>
</template>

<script>

export default {
  props:['selectData'],
  data() {
    return {
      mapData:{},
      spinShow:false,//本页加载
      formData: {},
      subDeptList: [],//运输企业
    }
  },
  mounted() {
    var that = this;

    //运输企业
    that.axios.post(that.apiUrl.coreDeptCoreDeptList, {}).then(res => {
      if (!!res) {
        that.subDeptList = res.data.data;
      }
    }).catch(err => {
      console.log("失败", err)
    })


    that.formData = that.selectData;
    that.$set(that.formData, 'wzSchedulingDate', (!!that.formData.schedulingDate) ? new Date(that.formData.schedulingDate) : '')//赋值
    that.$set(that.formData, 'startAdministrative', that.formData.placeStartProvinceName+' '+that.formData.placeStartCityName+' '+that.formData.placeStartCountyName)//赋值
    that.$set(that.formData, 'endAdministrative', that.formData.placeEndProvinceName+' '+that.formData.placeEndCityName+' '+that.formData.placeEndCountyName)//赋值



    that.mapLoad();

    that.axios.post(that.apiUrl.webApi + "/bill/record/billRecordInfo", {uuid:that.formData.uuid}).then(res => {
      if (res) {
        that.mapData = res.data.data;
        that.locationData();
      }
    }).catch(err => {
      console.log("失败", err)
    })

  },
  methods: {
    printTest() {
      this.$print(this.$refs._wz_ElectronicWaybillDetail) // 使用
    },
    mapLoad(){
      let that = this;
      that.map = new BMap.Map("_wz_ElectronicWaybillDetail");    // 创建Map实例
      that.map.centerAndZoom(new BMap.Point(105.058886,36.028623), 4);  // 初始化地图,设置中心点坐标和地图级别
      //添加地图类型控件
      that.map.addControl(new BMap.MapTypeControl({
        mapTypes: [
          BMAP_NORMAL_MAP,
          BMAP_HYBRID_MAP
        ]
      }));
      that.map.setCurrentCity("邢台");          // 设置地图显示的城市 此项是必须设置的
      that.map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
      // 左上角，添加比例尺
      let top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});
      that.map.addControl(top_left_control);
      //左上角，添加默认缩放平移控件
      let top_left_navigation = new BMap.NavigationControl();
      that.map.addControl(top_left_navigation);
    },
    //地图加载
    locationData() {
      let that = this;
      let line = [];
      that.map.clearOverlays();
      if(!that.mapData.vehiclePositionList){
        return false;
      }
      that.mapData.vehiclePositionList.forEach(function (k, i) {
        let marker;
        if (i == 0) {//起点
          let myIcon = new BMap.Icon("../../static/img/vehicleImg/start.png", new BMap.Size(28, 32));
          marker = new BMap.Marker(new BMap.Point(k.lonX, k.latY), {icon: myIcon});  // 创建标注
          marker.setZIndex(999999);
          that.map.addOverlay(marker);            //增加点


          var data = k;
          var opts = {
            position: new BMap.Point(k.lonX, k.latY), // 指定文本标注所在的地理位置
            offset: new BMap.Size(-20, -50) // 设置文本偏移量
          };
          // 创建文本标注对象
          var label = new BMap.Label(!!data.location?data.location:'--', opts);
          // 自定义文本标注样式
          label.setStyle({color: 'blue',borderRadius: '5px',borderColor: '#ccc',padding: '10px',fontSize: '16px',height: '30px',lineHeight: '30px',fontFamily: '微软雅黑'});
          that.map.addOverlay(label);

        } else if ((i + 1) == that.mapData.vehiclePositionList.length) {//终点
          let myIcon = new BMap.Icon("../../static/img/vehicleImg/End.png", new BMap.Size(28, 32));
          marker = new BMap.Marker(new BMap.Point(k.lonX, k.latY), {icon: myIcon});  // 创建标注
          marker.setZIndex(999999);
          that.map.addOverlay(marker);            //增加点


          var data = k;
          var opts = {
            position: new BMap.Point(k.lonX, k.latY), // 指定文本标注所在的地理位置
            offset: new BMap.Size(-20, -50) // 设置文本偏移量
          };
          // 创建文本标注对象
          var label = new BMap.Label(!!data.location?data.location:'--', opts);
          // 自定义文本标注样式
          label.setStyle({color: 'blue',borderRadius: '5px',borderColor: '#ccc',padding: '10px',fontSize: '16px',height: '30px',lineHeight: '30px',fontFamily: '微软雅黑'});
          that.map.addOverlay(label);


        } else {//其他标记样式
          let myIcon = new BMap.Icon("../../static/img/vehicleImg/gj.png", new BMap.Size(15, 15));
          marker = new BMap.Marker(new BMap.Point(k.lonX, k.latY), {icon: myIcon});  // 创建标注
          marker.setRotation(k.direction);
          marker.setZIndex(99999);
        }
        line.push(new BMap.Point(k.lonX, k.latY));//线连接点
      })
      let polyline = new BMap.Polyline(line, {
        strokeWeight: '3',//折线的宽度，以像素为单位
        strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1
        strokeColor: "#18a45b" //折线颜色
      });   //
      that.map.addOverlay(polyline);          //增加折线
      that.map.setViewport(line);
    },
  }
}
</script>

<style lang="less">
._wz_ElectronicWaybillDetail {
  table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 12px !important;

    td {
      min-width: 0;
      height: 40px;
      box-sizing: border-box;
      text-align: left;
      text-overflow: ellipsis;
      border: 1px solid #515a6e;
      padding: 0 10px;
      word-break: break-word;
    }
  }
}

</style>
